<template>
    <a-drawer popup-container="#wrap" width="500px" :visible="show" :ok-loading="form.loading" @ok="submit"
        @cancel="show = false" unmountOnClose>
        <template #title>
            {{$t('components.create.60zemc8cafg0')}}
        </template>
        <div class="table-info">
            <a-form ref="formRef" :model="form.data" @submit="submit" layout="vertical">
                <a-form-item field="name" :label="$t('components.create.60zemc8cb780')" :rules="[{ required: true, message: $t('components.create.60zemc8cbbw0') }]">
                    <a-input v-model="form.data.name" :placeholder="$t('components.create.60zemc8cbbw0')" />
                </a-form-item>
                <a-form-item field="roleId" :label="$t('components.create.60zemc8cbg00')" :rules="[{ required: true, message: $t('components.create.60zemc8cbjo0') }]">
                    <a-select v-model="form.data.roleId" :placeholder="$t('components.create.60zemc8cbjo0')">
                        <a-option v-for="item in (roles as any)" :value="item.id">{{ item.name }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="userName" :label="$t('components.create.60zemc8cbn40')" :rules="[{ required: true, message: $t('components.create.60zemc8cbq80') }]">
                    <a-input v-model="form.data.userName" :placeholder="$t('components.create.60zemc8cbq80')" />
                </a-form-item>
                <a-form-item field="password" :label="$t('components.create.60zemc8cbt80')" :rules="[{ required: true, message: $t('components.create.60zemc8cbw40') }]">
                    <a-input-password v-model="form.data.password" :placeholder="$t('components.create.60zemc8cbw40')"/>
                </a-form-item>
                <a-form-item field="tel" :label="$t('components.create.60zemc8cc180')" :rules="[{ message: $t('components.create.60zemc8cc3w0') },{match:/^1[3456789]\d{9}$/,message:$t('components.create.60zemc8cc3w1')}]">
                    <a-input v-model="form.data.tel" :placeholder="$t('components.create.60zemc8cc3w0')"/>
                </a-form-item>
                <a-form-item field="status" :label="$t('components.create.60zemc8cc6s0')">
                    <a-switch :checked-value="1" :unchecked-value="0" v-model="form.data.status" />
                </a-form-item>
                <a-form-item field="remark" :label="$t('user.user.60zemoh0qxk0')">
                    <a-input v-model="form.data.remark" :placeholder="$t('components.create.60zemc8ccbw0')" />
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { apiUserCreate } from '@/api/setting'
const local = useLocal()
const show = defineModel('show', { default: false })
const roles = defineModel('roles', { default: [] })
const formRef = ref()
const emit = defineEmits(['refresh'])
const form = reactive({
    data: {
        name: '',
        userName: '',
        password: '',
        roleId: '',
        tel: '',
        remark: '',
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id,
        status: 1
    },
    loading: false,
})
const submit = async () => {
    const validate= await formRef.value?.validate()
    if(validate) return;
    form.loading = true
    const { code } = await apiUserCreate({
        ...form.data,
    })
    form.loading = false
    if (code != 200) return;
    emit('refresh')
    formRef.value?.resetFields()
    show.value = false
}
</script>

<style scoped></style>